<template>
    <!-- 平台管理 -->
    <div class="platform-manage-wrap">
        <!-- 标题 -->
        <div class="platform-manage-title page-title-wrap">
            <p class="page-title-name">
                <i class="iconfont icon_biaotijiantou" @click="$Ctl.backProvePage()"></i>
                <span class="page-title-text">平台管理</span>
            </p>
        </div>
        <!-- 主展示区域 -->
        <div class="platform-manage-maincontent">
            <!-- 切换视图 -->
            <div v-show="pageType!=3" class="change-page-btn iconfont" :class="{'icon_tongji': pageType == 1, 'icon_ditu': pageType == 2}" @click="changePage"></div>
            <!-- 地图 -->
            <center-map class="page-wrap-one" v-if="pageType!=2"></center-map>
            <!-- 左右两侧页面 -->
            <div class="page-wrap-two" v-if="pageType!=1">
                <!-- 左侧 -->
                <div class="left-wrap">
                    <!-- 平台访问量 -->
                    <traffic class="model-wrap traffic-model"></traffic>
                    <div class="model-wrap throughput-or-response-time-model">
                        <!-- 平台吞吐量 -->
                        <throughput-or-response-time class="throughput-model" :type="1"></throughput-or-response-time>
                        <!-- 平台响应时间 -->
                        <throughput-or-response-time class="response-time-model" :type="2"></throughput-or-response-time>
                    </div>
                    <div class="model-wrap personnel-statistics-model">
                        <!-- 桌面客户端 -->
                        <personnel-statistics class="pc-statistics-model" :type="1"></personnel-statistics>
                        <!-- 移动端 -->
                        <personnel-statistics class="iphone-statistics-model" :type="2"></personnel-statistics>
                    </div>
                </div>
                <!-- 右侧 -->
                <div class="right-wrap">
                    <!-- 服务器性能监测 -->
                    <servers-performance-monitor class="model-wrap servers-performance-monitor-model"></servers-performance-monitor>
                    <!-- 数据处理省份Top5 -->
                    <data-process-province-rank class="model-wrap data-process-province-rank-model"></data-process-province-rank>
                    <!-- 通信服务统计 -->
                    <communications-services-statistics class="model-wrap communications-services-statistics-model"></communications-services-statistics>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import CenterMap from './PageModel/CenterMap' // 地图
import Traffic from './PageModel/Traffic' // 平台访问量
import ThroughputOrResponseTime from './PageModel/ThroughputOrResponseTime' // 平台吞吐量/平台响应时间
import PersonnelStatistics from './PageModel/PersonnelStatistics' // 桌面客户端/移动端
import ServersPerformanceMonitor from './PageModel/ServersPerformanceMonitor' // 服务器性能监测
import DataProcessProvinceRank from './PageModel/DataProcessProvinceRank' // 数据处理省份Top5
import CommunicationsServicesStatistics from './PageModel/CommunicationsServicesStatistics' // 通信服务统计

export default {
    name: 'PlatformManage',
    components: {
        CenterMap,
        Traffic,
        ThroughputOrResponseTime,
        PersonnelStatistics,
        ServersPerformanceMonitor,
        DataProcessProvinceRank,
        CommunicationsServicesStatistics
    },
    data() {
        return {
            pageType: window.innerWidth > 2560 ? 3 : 1, // 1-地图  2-统计 3-超过2560分辨率显示
        }
    },
    created() {
        this.$Ctl.loading(1, 10000)
        
        window.onresize = () => {
            if(window.innerWidth > 2560) {
                this.pageType = 3
            } else {
                if(this.pageType == 3) {
                    this.pageType = 1
                }
            }
        }
    },
    methods: {
        // 切换展示内容
        changePage() {
            this.$Ctl.loading(1, 10000)
            this.pageType = this.pageType == 1 ? 2 : 1
            if(this.pageType == 1) {
                // 摧毁平台管理服务器性能检测的定时器任务
                if(window.setverMonitorInterValObj) {
                    clearInterval(window.setverMonitorInterValObj)
                    window.setverMonitorInterValObj = null
                }
            }
        }
    }
}
</script>
<style lang="scss">
.platform-manage-wrap {
    padding: 0 30px 30px 30px;
    width: 100%;
    height: 100%;
    background-color: #061723;
    // background: url(../../../../assets/images/detailPage/platform-big-bg.png) 0 0 no-repeat;
    .platform-manage-maincontent {
        position: relative;
        width: 100%;
        height: calc(100% - 90px);
        .change-page-btn {
            position: absolute;
            top: -70px;
            right: 0;
        }
        .page-wrap-one,
        .page-wrap-two {
            width: 100%;
            height: 100%;
        }
        .page-wrap-two {
            display: flex;
            .left-wrap,
            .right-wrap {
                width: 50%;
                height: 100%;
            }
            .left-wrap {
                padding-right: 20px;
                .traffic-model {
                    height: 260px;
                }
                .throughput-or-response-time-model {
                    display: flex;
                    height: 400px;
                    .throughput-model,
                    .response-time-model {
                        width: 50%;
                    }
                }
                .personnel-statistics-model {
                    display: flex;
                    height: 250px;
                    .pc-statistics-model,
                    .iphone-statistics-model {
                        width: 50%;
                    }
                }
            }
            .right-wrap {
                padding-left: 20px;
                .servers-performance-monitor-model {
                    height: 370px;
                }
                .data-process-province-rank-model {
                    height: 290px;
                }
                .communications-services-statistics-model {
                    height: 250px;
                }
            }
            .model-wrap {
                margin-bottom: 20px;
                padding: 20px 50px;
                border:1px solid rgba(47,181,254,.2);
                .model-title {
                    font-size: 24px;
                    color: #A3BEDD;
                }
            }
        }
        
    }
}
// 大于2560
@media screen and (min-width: 2560px) {
    .platform-manage-wrap {
        .platform-manage-maincontent {
            .page-wrap-two {
                .left-wrap {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 25%;
                    min-width: 780px;
                    .model-wrap {
                        padding-left: 30px;
                        padding-right: 0;
                    }
                }
                .right-wrap {
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 25%;
                    min-width: 780px;
                    .model-wrap {
                        padding-left: 0;
                        padding-right: 30px;
                    }
                }
                .model-wrap {
                    border: none;
                }
            }
        }
    }
}
</style>
